<template>
  <div>
    <h1>计算属性和监听</h1>
    <input type="text" v-model="user.firstName" /><br />
    <input type="text" v-model="user.lastName" /><br />
    <input type="text" v-model="user.child.lastName" /><br />
    <input type="text" v-model="fullName1" /><br />
    <hr>
    <input type="text" v-model="fullName2" /><br />
    <input type="text" v-model="fullName3" /><br />
    <input type="text" v-model="fullName4" /><br />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, reactive, ref, watch, watchEffect, } from 'vue'

export default defineComponent({
  setup() {
    const user = reactive({
      firstName: "cheng",
      lastName: "lu",
      child: {
        firstName: "gogogo",
        lastName: "tototo"
      }
    })

    //计算属性   只有get方法
    const fullName1 = computed(() => {
      return user.firstName + '-' + user.lastName
    })
    console.log(fullName1);

    //计算属性的  get和set方法
    const fullName2 = computed({
      get() {
        return user.firstName + '-' + user.lastName;
      },
      set(value: string) {
        console.log(value);

        const arr = value.split("-")
        console.log(arr);
        user.firstName = arr[0];
        user.lastName = arr[1];

      }
    })


    //监听器  watch   一次监听一个数据
    const fullName3 = ref("")
    /*watch(user,
    ()=>{
      fullName3.value = user.firstName+ '-' + user.child.lastName

    },
    {
      //深度监视    引用数据类型  要用深度监视
      deep:true,
      immediate:true,
    })

    watch(fullName3, (newValue: string, oldValue) => {
      console.log(newValue);
      console.log(oldValue);
      let arr = newValue.split("-");
      user.firstName = arr[0];
      user.child.lastName = arr[1];
    });
    */

    // watch一次监听多个数据 当是基本数据类型时，直接写，  当是引用数据类型时，就需要使用函数的形式
    //当watch监听多个时，只要其中任何一个发生改变，都会触发watch的回调函数，所以要分情况写逻辑

    watch([fullName3, () => user.firstName, () => user.lastName], (values, oldValues) => {
      console.log(values);
      console.log(oldValues);
      //分情况写逻辑
      //情况一：当firstName 或 lastName 发生改变时，获取fullName3
      if (values[1] != oldValues[1] || values[2] != oldValues[2]) {
        fullName3.value = values[1] + "-" + values[2];

      } else if (values[0] != oldValues[1]) {
        let arr = values[0].split("-");
        user.firstName = arr[0];
        user.lastName = arr[1]
      }


      //情况二：如果fullName3发送改变时，获取新的firstName 和 lastName
      /*  if (values[0] != oldVaules[1]) {
           let arr = values[0].split("-");
          user.firstName = arr[0];
          user.lastName = arr[1];
      } */
      // 当fullName3变化 更新firstName lastName ，

      // 这两个if条件是没有关系，只有符合其中if中的条件，他们的内部逻辑就会发生


    }
    )




    //watchEffect  vue3新增的  它相当于 watch加上深度监视deep 和 立即执行immediate
    const fullName4 = ref("");
    watchEffect(() => {
      fullName4.value = user.firstName + '-' + user.lastName

    })




    return {
      user,
      fullName1,
      fullName2,
      fullName3,
      fullName4,

    }
  }
})
</script>

<style scoped>

</style>
